<template>
	<view class="container">
		<view class="header">
			<text class="title">登录欢迎消息测试</text>
			<text class="subtitle">模拟不同用户和时间的登录场景</text>
		</view>
		
		<view class="content">
			<view class="section">
				<text class="section-title">用户类型测试</text>
				<view class="button-group">
					<button class="test-btn student" @tap="testStudentLogin">学生登录</button>
					<button class="test-btn teacher" @tap="testTeacherLogin">教师登录</button>
					<button class="test-btn admin" @tap="testAdminLogin">管理员登录</button>
					<button class="test-btn phone" @tap="testPhoneLogin">手机号登录</button>
				</view>
			</view>
			
			<view class="section">
				<text class="section-title">时间段测试</text>
				<view class="button-group">
					<button class="test-btn time" @tap="testMorningLogin">早上登录</button>
					<button class="test-btn time" @tap="testNoonLogin">中午登录</button>
					<button class="test-btn time" @tap="testAfternoonLogin">下午登录</button>
					<button class="test-btn time" @tap="testEveningLogin">晚上登录</button>
					<button class="test-btn time" @tap="testNightLogin">深夜登录</button>
				</view>
			</view>
			
			<view class="section">
				<text class="section-title">特殊场景测试</text>
				<view class="button-group">
					<button class="test-btn special" @tap="testLongNameLogin">长用户名登录</button>
					<button class="test-btn special" @tap="testEmptyNameLogin">空用户名登录</button>
					<button class="test-btn special" @tap="testMultipleMessages">连续登录消息</button>
				</view>
			</view>
		</view>
		
		<view class="info">
			<text class="info-title">💡 测试说明</text>
			<text class="info-text">• 点击按钮可以模拟不同场景的登录欢迎消息</text>
			<text class="info-text">• 消息会根据用户类型和时间段显示不同内容</text>
			<text class="info-text">• 深夜登录会有额外的休息提醒</text>
			<text class="info-text">• 手机号登录会提示完善资料</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import messageManager from '@/utils/message-manager.js'
	
	// 模拟显示欢迎消息的方法（从登录页面复制）
	const showWelcomeMessage = (userInfo, mockHour = null) => {
		const currentHour = mockHour !== null ? mockHour : new Date().getHours();
		let timeGreeting = '';
		
		// 根据时间段显示不同的问候语
		if (currentHour >= 5 && currentHour < 12) {
			timeGreeting = '早上好';
		} else if (currentHour >= 12 && currentHour < 14) {
			timeGreeting = '中午好';
		} else if (currentHour >= 14 && currentHour < 18) {
			timeGreeting = '下午好';
		} else if (currentHour >= 18 && currentHour < 22) {
			timeGreeting = '晚上好';
		} else {
			timeGreeting = '夜深了';
		}
		
		// 获取用户名称
		const userName = userInfo.nickname || userInfo.name || userInfo.username || '同学';
		
		// 根据用户角色定制欢迎信息
		let roleInfo = '';
		if (userInfo.role === 'admin' || userInfo.role === 1) {
			roleInfo = '，祝您教学工作顺利！';
		} else {
			roleInfo = '，祝您学习愉快！';
		}
		
		// 组合完整的欢迎消息
		const welcomeMessage = `${timeGreeting}，${userName}！欢迎登录直播教育平台${roleInfo}`;
		
		// 显示欢迎消息
		messageManager.showSystemMessage(welcomeMessage);
		
		// 如果是夜深时分，额外提醒
		if (currentHour >= 22 || currentHour < 5) {
			setTimeout(() => {
				messageManager.showSystemMessage('💤 夜深了，注意休息哦～');
			}, 4000);
		}
		
		// 如果是新用户（手机号登录），显示额外提示
		if (userInfo.phone && !userInfo.id) {
			setTimeout(() => {
				messageManager.showSystemMessage('📝 建议您完善个人资料以获得更好的学习体验');
			}, 8000);
		}
	};
	
	// 学生登录测试
	const testStudentLogin = () => {
		const studentInfo = {
			id: 2025001,
			username: '2025001',
			name: '张小明',
			role: 0
		};
		showWelcomeMessage(studentInfo);
	};
	
	// 教师登录测试
	const testTeacherLogin = () => {
		const teacherInfo = {
			id: 1001,
			username: 'teacher001',
			name: '李老师',
			role: 1
		};
		showWelcomeMessage(teacherInfo);
	};
	
	// 管理员登录测试
	const testAdminLogin = () => {
		const adminInfo = {
			id: 1,
			username: 'admin',
			name: '系统管理员',
			role: 'admin'
		};
		showWelcomeMessage(adminInfo);
	};
	
	// 手机号登录测试
	const testPhoneLogin = () => {
		const phoneInfo = {
			phone: '13800138000',
			username: '13800138000',
			name: '用户8000',
			role: 0
		};
		showWelcomeMessage(phoneInfo);
	};
	
	// 时间段测试
	const testMorningLogin = () => {
		const userInfo = { name: '早起的同学', role: 0 };
		showWelcomeMessage(userInfo, 8); // 上午8点
	};
	
	const testNoonLogin = () => {
		const userInfo = { name: '午间学习者', role: 0 };
		showWelcomeMessage(userInfo, 13); // 下午1点
	};
	
	const testAfternoonLogin = () => {
		const userInfo = { name: '下午茶时光', role: 0 };
		showWelcomeMessage(userInfo, 15); // 下午3点
	};
	
	const testEveningLogin = () => {
		const userInfo = { name: '夜猫子', role: 0 };
		showWelcomeMessage(userInfo, 20); // 晚上8点
	};
	
	const testNightLogin = () => {
		const userInfo = { name: '深夜学习者', role: 0 };
		showWelcomeMessage(userInfo, 23); // 晚上11点
	};
	
	// 特殊场景测试
	const testLongNameLogin = () => {
		const userInfo = {
			name: '这是一个非常非常长的用户名测试',
			role: 0
		};
		showWelcomeMessage(userInfo);
	};
	
	const testEmptyNameLogin = () => {
		const userInfo = {
			username: '',
			name: '',
			role: 0
		};
		showWelcomeMessage(userInfo);
	};
	
	const testMultipleMessages = () => {
		// 模拟多个用户连续登录
		const users = [
			{ name: '用户A', role: 0 },
			{ name: '用户B', role: 1 },
			{ name: '用户C', role: 0 }
		];
		
		users.forEach((user, index) => {
			setTimeout(() => {
				showWelcomeMessage(user);
			}, index * 1000);
		});
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		min-height: 100vh;
		background: #f5f5f5;
	}
	
	.header {
		text-align: center;
		padding: 40rpx 0;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 24rpx;
		color: #666;
	}
	
	.content {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.section {
		margin-bottom: 40rpx;
	}
	
	.section:last-child {
		margin-bottom: 0;
	}
	
	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.button-group {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}
	
	.test-btn {
		flex: 1;
		min-width: 200rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
		border: none;
		margin: 0;
		color: white;
	}
	
	.test-btn.student {
		background: #007AFF;
	}
	
	.test-btn.teacher {
		background: #34C759;
	}
	
	.test-btn.admin {
		background: #FF3B30;
	}
	
	.test-btn.phone {
		background: #FF9500;
	}
	
	.test-btn.time {
		background: #AF52DE;
	}
	
	.test-btn.special {
		background: #FF2D92;
	}
	
	.test-btn:active {
		opacity: 0.8;
		transform: scale(0.98);
	}
	
	.info {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
	}
	
	.info-title {
		font-size: 26rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}
	
	.info-text {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
		display: block;
		margin-bottom: 10rpx;
	}
</style>






















